<!-- 搜索导航栏 -->
<template>
    <div class="search-page-nav">
        <div class="search-page-nav-inner">
            <ul class="tablist">
                <li class="tablist-item">
                    <router-link to='/homepage' class="tablist-item-inner">综合</router-link>
                </li>
                <li class="tablist-item">
                    <router-link to='/homepage' class="tablist-item-inner">用户</router-link>
                </li>
                <li class="tablist-item">
                    <router-link to='/homepage' class="tablist-item-inner">社区</router-link>
                </li>
            </ul>
            <div class="time-picker">
                <cm-selector>
                    <cm-selector-option></cm-selector-option>
                </cm-selector>
            </div>
        </div>
    </div>
</template>

<script>
import CmSelectorOption from '../common/selector/cm-selector-option.vue';
import CmSelector from '../common/selector/cm-selector.vue';
export default {
    data () {
        return {
        };
    },

    components: {CmSelector, CmSelectorOption},

    computed: {},

    // mounted: {},

    methods: {}
}

</script>
<style>
.search-page-nav{
    position: relative;
    width: 100%;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    backdrop-filter: blur(30px);
    transition: all 0.3s;
}
.search-page-nav-inner{
    width: 1000px;
    height: 100%;
    box-sizing: border-box;
    padding:0 2px;
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin: 0 auto;
}
.search-page-nav-inner>.tablist{
    height: 100%;
    list-style: none;
    margin: 0;
}
.search-page-nav-inner>.tablist>.tablist-item{
    margin: auto 0;
    display: inline-block;
    padding: 15px 0;
}
.search-page-nav-inner>.tablist>.tablist-item>.tablist-item-inner{
    font-size: 16px;
    color: black;
    font-weight: 500;
    text-decoration: none;
    padding: 0 15px;
}
.time-picker{
    display: inline-block;
    width: 10%;
    position: absolute;
    right: 56px;
    position: absolute;
    padding: 10px 0px;
}

</style>